<template>
	<!-- 我的错题、我的收藏 -->
	<view class="pd-30">
		<my-switch-navbar :activeTab.sync="activeTab" :tabName="tabName"></my-switch-navbar>
		<!-- <my-scroll-view scroll-y refresher-enabled :init="init"> -->
		<view v-show="activeTab === 0">
			<my-subject-chapter-collapse ref="collapse" @on-chapter-click="handleStart" :get-subject-api="api.subject" :get-chapter-api="api.chapter"></my-subject-chapter-collapse>
		</view>
		<view v-show="activeTab === 1" class="padding-btm">
			<my-paper-list-item answer @start-exam="handleStart" :key="paper.paperid" v-for="paper in paperList.list" :item="paper">
				<template v-slot:info="{ counts, colquecount, createtime }">
					<image src="../../static/icon/clock.png"></image>
					<text>交卷时间：{{ createtime }}</text>
					<image class="wrongIcon" src="../../static/icon/count.png"></image>
					<text>{{ title }}数量：{{ counts || colquecount }}</text>
				</template>
			</my-paper-list-item>
			<u-loadmore v-show="isShowLoadMore" icon-type="flower" bg-color="#f5f5f5" :status="status" @loadmore="getWrongPaper()" :margin-top="20" />
			<my-empty v-if="isEmpty"></my-empty>
		</view>
		<!-- </my-scroll-view> -->
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';

export default {
	mixins: [exam],
	data() {
		return {
			activeTab: 0,
			module: {
				//我的错题
				wrongTopic: {
					tabName: ['章节错题', '试卷错题'],
					title: '错题',
					api: {
						subject: '/app/errorQuestion/getErrorSubject',
						chapter: '/app/errorQuestion/getErrorChapter',
						paperList: '/app/errorQuestion/getErrorPaperList'
					},
					answerPageSetting: {
						navTitle: '我的错题',
						backHandler: 'emptyRightAnswer'
					}
				},
				//我的收藏
				collection: {
					tabName: ['章节收藏', '试卷收藏'],
					title: '收藏',
					api: {
						subject: '/app/collect/getCollectSubJectList',
						chapter: '/app/collect/getCollectChapterList',
						paperList: '/app/collect/getPaperCollectList'
					},
					answerPageSetting: {
						navTitle: '我的收藏'
					}
				}
			},
			moudleName: '',
			paperList: {
				isLastPage: false,
				list: [],
				pageNo: 1
			},
			status: 'loadmore'
		};
	},
	watch: {
		activeTab(newValue, oldValue) {
			if (newValue === 1 && this.status !== 'nomore') {
				this.getWrongPaper();
			}
		}
	},
	onLoad({ moduleName }) {
		this.moudleName = moduleName;
	},
	onReachBottom() {
		if (this.activeTab === 1 && !this.paperList.isLastPage) {
			this.getWrongPaper();
		}
	},
	computed: {
		tabName() {
			return this.module[this.moudleName].tabName;
		},
		api() {
			return this.module[this.moudleName].api;
		},
		title() {
			return this.module[this.moudleName].title;
		},
		startAnswerApiParams() {
			return this.module[this.moudleName].startAnswerApiParams;
		},
		answerPageSetting() {
			return this.module[this.moudleName].answerPageSetting;
		},
		list() {
			return this.paperList.list;
		},
		isLastPage() {
			return this.paperList.isLastPage;
		}
	},
	methods: {
		init() {
			if (this.activeTab === 0) {
				return this.$refs.collapse.getSubject();
			} else {
				this.paperList.isLastPage = false;
				this.paperList.list = [];
				this.paperList.pageNo = 1;
				this.status = 'loadmore';
				return this.getWrongPaper();
			}
		},
		getWrongPaper() {
			const { list, pageNo } = this.paperList;
			this.status = 'loading';
			return new Promise((resolve, reject) => {
				this.request
					.post(this.api.paperList, {
						pageNo
					})
					.then(res => {
						const { isLastPage, list: newList } = res;
						this.paperList.list = list.concat(newList);
						this.paperList.isLastPage = isLastPage;
						if (isLastPage) this.status = 'nomore';
						else this.paperList.pageNo++;
						resolve();
					})
					.catch(reject)
					.finally(() => {
						this.status !== 'nomore' && (this.status = 'loadmore');
					});
			});
		},
		handleStart(e) {
			//章节错题 试卷错题参数不一样
			//章节/试卷
			const { chapterId = null, paperid = null, number, correctCount = 0, errorCount = 0,examid=null} = e;
			const answerPageSetting = {
				correctTopic: true,
				autoJump: true,
				clearHistoryHandler: 'clearWrongAndCollectHistory',
				correcting: true,
				initArguments: [true],
				updateHistoryHandler: 'updateWrongOrCollectTopic',
				topicNumber: number,
				correctCount,
				errorCount,
				...this.answerPageSetting
			};
			const apiSetting = { method: 'get', url: '/app/errorQuestion/getErrorQuestion' };
			apiSetting.params = {
				chapterId,
				paperid,
				examid,
				type: this.moudleName === 'collection' ? 1 : 2
			};
			this.startAnswer(apiSetting, answerPageSetting);
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style lang="scss">
	.paper-item{
		height: 150upx;
		padding: 35upx 30upx;
		.name{
			margin-bottom: 20upx!important;
		}
	}
	.info{
		text{
			height: 30upx;
			line-height: 30upx;
			overflow: hidden;
			max-width: 60%;
		}
	}
	.wrongIcon{
		margin-left: 39upx;
	}
</style>
